<template>
  <div class="page">
    <tree-list
      :path="selectPath"
      :show-level="1"
      @folder-select="folderSelect"
      @file-select="fileSelect"
    ></tree-list>
    <div class="content-wrapper">
      <c-card v-if="selectPath" title="电能集抄数据" class="card-wrapper">
        <!-- <div class="search-row">
            <div>
              <div class="item">
                <label>是否在线</label>
                <el-select v-model="online" size="small">
                  <el-option label="全部" :value="null"></el-option>
                  <el-option v-for="(l, i) in locks" :key="i" :label="l" :value="l"></el-option>
                </el-select>
              </div>
              <div class="item">
                <label>开始日期:</label>
                <el-date-picker
                  v-model="startDate"
                  type="date"
                  placeholder="开始日期"
                  size="small"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                ></el-date-picker>
              </div>
              <div class="item">
                <label>结束日期:</label>
                <el-date-picker
                  v-model="endDate"
                  type="date"
                  placeholder="结束日期"
                  size="small"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                ></el-date-picker>
              </div>
              <c-search
                v-model="brandName"
                :height="30"
                :width="200"
                placeholder="名称搜索"
                class="item"
                @submit="_getAllData"
              />
            </div>
        </div>-->
        <div
          ref="container"
          class="card-content"
          :style="{'flex-direction': hasTwoCol ? 'row' : 'column'}"
        >
          <template v-if="!hasTwoCol">
            <el-table
              ref="table"
              v-loading="loading"
              :data="list"
              style="width: 100%"
              :height="tableHeight"
            >
              <el-table-column prop="name" label="设备名称" show-overflow-tooltip></el-table-column>
              <el-table-column prop="variabletype" label="变量名称"></el-table-column>
              <el-table-column prop="rvalue" label="累计电能（kWh）"></el-table-column>
              <el-table-column prop="recTime" label="记录时间"></el-table-column>
            </el-table>
          </template>
          <template v-else>
            <el-table ref="table" :data="dataList[1]" :height="tableHeight">
              <el-table-column prop="name" label="设备名称" show-overflow-tooltip></el-table-column>
              <el-table-column prop="variabletype" label="变量名称"></el-table-column>
              <el-table-column prop="rvalue" label="累计电能（kWh）"></el-table-column>
              <el-table-column prop="recTime" label="记录时间"></el-table-column>
            </el-table>
            <spliter />
            <el-table ref="table" :data="dataList[0]" :height="tableHeight">
              <el-table-column prop="name" label="设备名称" show-overflow-tooltip></el-table-column>
              <el-table-column prop="variabletype" label="变量名称"></el-table-column>
              <el-table-column prop="rvalue" label="累计电能（kWh）"></el-table-column>
              <el-table-column prop="recTime" label="记录时间"></el-table-column>
            </el-table>
          </template>
        </div>
      </c-card>
      <h3 v-else style="text-align: center; ">请先选择厂站...</h3>
    </div>
  </div>
</template>

<script>
import TreeList from "./components/TreeList";
import CCard from "@/components/CCard";
import Spliter from "@/components/Spliter";
// import CSearch from "@/components/CSearch";
import { debounce } from "lodash";
import { getAllData } from "@/api/svg";
import { calcPageNum } from "@/utils";
export default {
  name: "AllData",
  components: {
    TreeList,
    CCard,
    Spliter
  },
  data() {
    return {
      loading: false,
      selectPath: [],
      list: [],
      tableHeight: null
    };
  },
  computed: {
    hasTwoCol() {
      const rs = this.getTableItemNum();
      const len = this.list.length;
      return len > rs;
      // return true;
    },
    dataList() {
      const len = this.list.length;
      if (this.hasTwoCol) {
        return [this.list.slice(0, len / 2), this.list.slice(len / 2)];
      } else {
        return this.list;
      }
    }
  },
  mounted() {},
  created() {
    const path = this.$route.query.path;
    this.selectPath = path && path.split(",");
    path && this._getAllData();
  },
  beforeRouteUpdate(to, from, next) {
    if (to.fullPath !== from.fullPath) {
      this.selectPath = (to.query.path || "").split(",");
      this.selectPath.length > 0 &&
        this._getAllData(this.selectPath[this.selectPath.length - 1]);
    }
    next();
  },
  methods: {
    _getAllData() {
      const id = this.selectPath[this.selectPath.length - 1];
      this.loading = true;
      return getAllData(id)
        .then(data => {
          this.list = data;
        })
        .catch()
        .finally(() => (this.loading = false));
    },
    folderSelect: debounce(function(path) {
      const urlPath = this.$route.path;
      this.selectPath = path;
      this.$router.push(urlPath + "?path=" + path.join(","));
    }, 500),
    fileSelect: debounce(function(path) {
      const urlPath = this.$route.path;
      this.selectPath = path;
      this.$router.push(urlPath + "?path=" + path.join(","));
    }, 500),
    getTableItemNum() {
      if (!this.$refs["container"]) return 10;
      const h = this.$refs["container"].clientHeight;
      const n = calcPageNum(h);
      return n;
    }
  }
};
</script>

<style lang="scss" scoped>
.page {
  height: 100%;
}
.tree {
  position: absolute;
  width: 275px;
  height: 100%;
  overflow-y: auto;
  background: #222c3c;
  box-sizing: border-box;
}
.content-wrapper {
  overflow-y: auto;
  margin-left: 275px;
  height: 100%;
  position: relative;
  .card-content {
    flex: 1;
    display: flex;
  }
}
</style>
